Visualización de Información

IIC2026 2021-2

Cierre al curso

Visualización de Información

IIC2026 2021-2

¿Cómo es trabajar en Visualización de Información?

¿Por dónde parto?

¿Hacia dónde voy?

¿Hay mejores opciones que otras?

¿Me debería enfocar en efectividad?

¿Cómo me aseguro tomé buenas decisiones?

¿En qué me enfoco al validar una visualización?

Modelo anidado de trabajo en cuatro niveles

Caracterización de dominio

Abstracción de datos y tareas

Codificación visual y de interacción

Implementación algorítmica

Caracterización de dominio

Entender el campo de conocimiento y contexto de aplicación
Entender datos, usuarios y tareas.
Entrevistas, observaciones o investigación mediante literatura.

Caracterización de dominio

Abstracción de datos y tareas

Codificación visual y de interacción

Implementación algorítmica

Abstracción de datos y tareas

Traer las particularidades del contexto al mismo lenguaje.
Definir el qué y por qué de la herramienta.
Seleccionar los aspectos a consideración.

Caracterización de dominio

Abstracción de datos y tareas

Codificación visual y de interacción

Implementación algorítmica

Codificación visual y de interacción
Implementación algorítmica

Definir el cómo.
Idiom: enfoque distintivo de codificar información o manipularla.
Hay decisiones visuales y decisiones de interacción.
Código.
Se revisa eficiencia, escalabilidad y dificultad.

Caracterización de dominio

Abstracción de datos y tareas

Codificación visual y de interacción

Implementación algorítmica

Codificación visual y de interacción

Marcas y canales.

Codificación visual y de interacción

Marcas y canales.
Principios de efectividad y expresividad.

Codificación visual y de interacción

Marcas y canales.
Principios de efectividad y expresividad.
Percepción.

Codificación visual y de interacción

Marcas y canales.
Principios de efectividad y expresividad.
Percepción.
Color.

Codificación visual y de interacción

Marcas y canales.
Principios de efectividad y expresividad.
Percepción.
Principios de diseño.

Codificación visual y de interacción

Marcas y canales.
Principios de efectividad y expresividad.
Percepción.
Principios de diseño.
Codificaciones para datos tabulares.

Codificación visual y de interacción

Marcas y canales.
Principios de efectividad y expresividad.
Percepción.
Principios de diseño.
Codificaciones para datos tabulares.
Codificaciones para datos geométricos.

Codificación visual y de interacción

Marcas y canales.
Principios de efectividad y expresividad.
Percepción.
Principios de diseño.
Codificaciones para datos tabulares.
Codificaciones para datos geométricos.
Codificaciones para datos redes.

Codificación visual y de interacción

Marcas y canales.
Principios de efectividad y expresividad.
Percepción.
Principios de diseño.
Codificaciones para datos tabulares.
Codificaciones para datos geométricos.
Codificaciones para datos redes.
Manipulación de vista.

Codificación visual y de interacción

Marcas y canales.
Principios de efectividad y expresividad.
Percepción.
Principios de diseño.
Codificaciones para datos tabulares.
Codificaciones para datos geométricos.
Codificaciones para datos redes.
Manipulación de vista.
Facet.

Codificación visual y de interacción

Marcas y canales.
Principios de efectividad y expresividad.
Percepción.
Principios de diseño.
Codificaciones para datos tabulares.
Codificaciones para datos geométricos.
Codificaciones para datos redes.
Manipulación de vista.
Facet.
Reducción de datos.

Implementación algorítmica

HTML, CSS, SVG, JavaScript.

Implementación algorítmica

HTML, CSS, SVG, JavaScript.
D3.js.

Implementación algorítmica

HTML, CSS, SVG, JavaScript.
D3.js.
Selecciones.

Implementación algorítmica

HTML, CSS, SVG, JavaScript.
D3.js.
Selecciones.
Join de datos.

Implementación algorítmica

HTML, CSS, SVG, JavaScript.
D3.js.
Selecciones.
Join de datos.
Cargado de datos.

Implementación algorítmica

HTML, CSS, SVG, JavaScript.
D3.js.
Selecciones.
Join de datos.
Cargado de datos.
Escalas.

Implementación algorítmica

HTML, CSS, SVG, JavaScript.
D3.js.
Selecciones.
Join de datos.
Cargado de datos.
Escalas.
Ejes.

Implementación algorítmica

HTML, CSS, SVG, JavaScript.
D3.js.
Selecciones.
Join de datos.
Cargado de datos.
Escalas.
Ejes.
Eventos.

Implementación algorítmica

HTML, CSS, SVG, JavaScript.
D3.js.
Selecciones.
Join de datos.
Cargado de datos.
Escalas.
Ejes.
Eventos.
Transiciones.

Implementación algorítmica

HTML, CSS, SVG, JavaScript.
D3.js.
Selecciones.
Join de datos.
Cargado de datos.
Escalas.
Ejes.
Eventos.
Transiciones.
Escalas para organización espacial.

Implementación algorítmica

HTML, CSS, SVG, JavaScript.
D3.js.
Selecciones.
Join de datos.
Cargado de datos.
Escalas.
Ejes.
Eventos.
Transiciones.
Escalas para organización espacial.
Marcas de muchos tipos.

Implementación algorítmica

HTML, CSS, SVG, JavaScript.
D3.js.
Selecciones.
Join de datos.
Cargado de datos.
Escalas.
Ejes.
Eventos.
Transiciones.
Escalas para organización espacial.
Marcas de muchos tipos.
Zoom.

Implementación algorítmica

HTML, CSS, SVG, JavaScript.
D3.js.
Selecciones.
Join de datos.
Cargado de datos.
Escalas.
Ejes.
Eventos.
Transiciones.
Escalas para organización espacial.
Marcas de muchos tipos.
Zoom.
Proyecciones geográficas.

Implementación algorítmica

HTML, CSS, SVG, JavaScript.
D3.js.
Selecciones.
Join de datos.
Cargado de datos.
Escalas.
Ejes.
Eventos.
Transiciones.
Escalas para organización espacial.
Marcas de muchos tipos.
Zoom.
Proyecciones geográficas.
Brushing.

Implementación algorítmica

HTML, CSS, SVG, JavaScript.
D3.js.
Selecciones.
Join de datos.
Cargado de datos.
Escalas.
Ejes.
Eventos.
Transiciones.
Escalas para organización espacial.
Marcas de muchos tipos.
Zoom.
Proyecciones geográficas.
Brushing.
Agregación.

Implementación algorítmica

HTML, CSS, SVG, JavaScript.
D3.js.
Selecciones.
Join de datos.
Cargado de datos.
Escalas.
Ejes.
Eventos.
Transiciones.
Escalas para organización espacial.
Marcas de muchos tipos.
Zoom.
Proyecciones geográficas.
Brushing.
Agregación.
Vista.

Implementación algorítmica

HTML, CSS, SVG, JavaScript.
D3.js.
Selecciones.
Join de datos.
Cargado de datos.
Escalas.
Ejes.
Eventos.
Transiciones.
Escalas para organización espacial.
Marcas de muchos tipos.
Zoom.
Proyecciones geográficas.
Brushing.
Agregación.
Vista.
Posicionamiento dirigido por fuerzas.

Implementación algorítmica

HTML, CSS, SVG, JavaScript.
D3.js.
Selecciones.
Join de datos.
Cargado de datos.
Escalas.
Ejes.
Eventos.
Transiciones.
Escalas para organización espacial.
Marcas de muchos tipos.
Zoom.
Proyecciones geográficas.
Brushing.
Agregación.
Vista.
Posicionamiento dirigido por fuerzas.
Jerarquías.

Resultados de aprendizaje

Reconocer etapas y conceptos básicos involucrados en un proceso de diseño de una visualización de información.

Resultados de aprendizaje

Reconocer etapas y conceptos básicos involucrados en un proceso de diseño de una visualización de información. (Cuestionarios)

Resultados de aprendizaje

Reconocer etapas y conceptos básicos involucrados en un proceso de diseño de una visualización de información. (Cuestionarios)
Analizar visualizaciones de información mediante una deconstrucción de las codificaciones visuales que le componen.
Clasificar los conjuntos de datos reflejados en herramientas de visualización según su naturaleza y contexto.
Evaluar herramientas de visualización según principios perceptivos, principios de diseño gráfico y la efectividad de sus componentes.

Resultados de aprendizaje

Reconocer etapas y conceptos básicos involucrados en un proceso de diseño de una visualización de información. (Cuestionarios)
Analizar visualizaciones de información mediante una deconstrucción de las codificaciones visuales que le componen. (Entrega 1 e Hito 1)
Clasificar los conjuntos de datos reflejados en herramientas de visualización según su naturaleza y contexto. (Entrega 1 e Hito 1)
Evaluar herramientas de visualización según principios perceptivos, principios de diseño gráfico y la efectividad de sus componentes. (Entrega 1 e Hito 1)

Resultados de aprendizaje

Reconocer etapas y conceptos básicos involucrados en un proceso de diseño de una visualización de información. (Cuestionarios)
Analizar visualizaciones de información mediante una deconstrucción de las codificaciones visuales que le componen. (Entrega 1 e Hito 1)
Clasificar los conjuntos de datos reflejados en herramientas de visualización según su naturaleza y contexto. (Entrega 1 e Hito 1)
Evaluar herramientas de visualización según principios perceptivos, principios de diseño gráfico y la efectividad de sus componentes. (Entrega 1 e Hito 1)
Construir herramientas de visualización interactivas mediante programación para resolver necesidades de comunicación de información

Resultados de aprendizaje

Reconocer etapas y conceptos básicos involucrados en un proceso de diseño de una visualización de información. (Cuestionarios)
Analizar visualizaciones de información mediante una deconstrucción de las codificaciones visuales que le componen. (Entrega 1 e Hito 1)
Clasificar los conjuntos de datos reflejados en herramientas de visualización según su naturaleza y contexto. (Entrega 1 e Hito 1)
Evaluar herramientas de visualización según principios perceptivos, principios de diseño gráfico y la efectividad de sus componentes. (Entrega 1 e Hito 1)
Construir herramientas de visualización interactivas mediante programación para resolver necesidades de comunicación de información. (Entrega 2 e Hito 2)

Resultados de aprendizaje

Reconocer etapas y conceptos básicos involucrados en un proceso de diseño de una visualización de información. (Cuestionarios)
Analizar visualizaciones de información mediante una deconstrucción de las codificaciones visuales que le componen. (Entrega 1 e Hito 1)
Clasificar los conjuntos de datos reflejados en herramientas de visualización según su naturaleza y contexto. (Entrega 1 e Hito 1)
Evaluar herramientas de visualización según principios perceptivos, principios de diseño gráfico y la efectividad de sus componentes. (Entrega 1 e Hito 1)
Construir herramientas de visualización interactivas mediante programación para resolver necesidades de comunicación de información. (Entrega 2 e Hito 2)
Diseñar una herramienta de visualización de información mediante un proceso de an ́alisis y diseño, en una situación escogida.

Resultados de aprendizaje

Reconocer etapas y conceptos básicos involucrados en un proceso de diseño de una visualización de información. (Cuestionarios)
Analizar visualizaciones de información mediante una deconstrucción de las codificaciones visuales que le componen. (Entrega 1 e Hito 1)
Clasificar los conjuntos de datos reflejados en herramientas de visualización según su naturaleza y contexto. (Entrega 1 e Hito 1)
Evaluar herramientas de visualización según principios perceptivos, principios de diseño gráfico y la efectividad de sus componentes. (Entrega 1 e Hito 1)
Construir herramientas de visualización interactivas mediante programación para resolver necesidades de comunicación de información. (Entrega 2 e Hito 2)
Diseñar una herramienta de visualización de información mediante un proceso de análisis y diseño, en una situación escogida. (Examen)